<!doctype html>

<html>
<head>
  <title>Compilation results for awesomebar.js</title>
  <style>
  body { margin: 0 auto; width: 700px; font-family: Arial; font-size: 13px; }
  code, pre { color: green }
  table { border-width: 0 0 1px 1px; border-color: #ccc; border-style: solid; }
  td, th { border-width: 1px 1px 0 0; border-color: #ccc; border-style: solid; }
  th { text-align: left }
  td { vertical-align: top }
  .bytes { text-align: right; padding-right: 4px }
  </style>
</head>
<body>

<h2>Example of using Closure Compiler to attain an 85% improvement over
YUI Compressor when minifying Closure Library code</h2>

I felt that a number of blog posts that I read on the Web dramatically
underestimated <a href="http://code.google.com/closure/">Closure</a>'s ability to minify JavaScript, so I ran
some tests that demonstrate how dramatic the effects of using the
<a href="http://code.google.com/closure/compiler/">Compiler</a> and
the <a href="http://code.google.com/closure/library/">Library</a> together can be. Bear in mind that most JavaScript code, as it is
exists today, is not written in such a way that is compatible with the Compiler's
Advanced mode, but the code in the Closure Library is.
To learn how to update your code to work with Advanced mode, read the
<a href="http://code.google.com/closure/compiler/docs/api-tutorial3.html">Advanced Compilation and Externs</a>
article on the Google Code web site.

<p>

These tests were run using the following software:

<ul>
  <li><a href="http://code.google.com/p/closure-library/">Closure Library</a>
    checked out of Subversion at revision 8
  </li>
  <li><a href="http://code.google.com/p/closure-compiler/">Closure Compiler</a>
    checked out of Subversion at revision 11
  </li>
  <li><a href="http://yuilibrary.com/downloads/#yuicompressor">YUI Compressor</a> version 2.4.2</li>
  <li><a href="http://ant.apache.org/">Apache Ant</a> version 1.7.0</li>
  <li>Mac OS X v10.6 Snow Leopard</li>
</ul>

Here are the results:

<p></p>

<table cellspacing="0" cellpadding="2">

<tr><th>Size in bytes</th><th>Filename</th><th width="50%">&nbsp;</th></tr>

<tr><td class="bytes">    <b>34291</b> </td><td> <b>awesomebar-advanced-no-debug.js</b> </td>
  <td>Closure Compiler with ADVANCED_OPTIMIZATIONS enabled, along with some additional CompilerOptions.
  See <a href="http://code.google.com/p/closure-experiments/source/browse/trunk/src/com/bolinfest/closure/DebugStrippingCompilerRunner.java">DebugStrippingCompilerRunner</a>.</td></tr>

<tr><td class="bytes">    37714 </td><td> awesomebar-advanced.js </td>
  <td>Closure Compiler with ADVANCED_OPTIMIZATIONS enabled.</td></tr>

<!--  <tr><td class="bytes">   262123 </td><td> awesomebar-anonymized-yui.js </td></tr> -->

<tr><td class="bytes">   193986 </td><td> awesomebar-simple.js </td>
  <td>Closure Compiler with SIMPLE_OPTIMIZATIONS enabled.</td></tr>

<tr><td class="bytes">   <b>223693</b> </td><td> <b>awesomebar-yui.js</b> </td>
  <td>YUI Compressor</td></tr>

<tr><td class="bytes">   261322 </td><td> awesomebar-whitespace-only.js </td>
  <td>Closure Compiler with WHITESPACE_ONLY enabled.</td></tr>

<tr><td class="bytes">   809709 </td><td> awesomebar-concat.js </td>
  <td>All of awesomebar.js's dependencies concatenated together.
  This file was used as the input to YUI compressor whereas the
  Closure Compiler received each dependency as an individual input.</td></tr>

<!-- <tr><td class="bytes">   809726 </td><td> awesomebar-concat-anonymized.js </td></tr> -->

</table>

<p></p>

Doing the math:

<h3>(1 - (34291 / 223693)) * 100% = <span style="color: #A00">84.67% Savings</span></h3>

<p></p>

The code is <a href="http://code.google.com/p/closure-experiments/source/browse/trunk/">
publicly available on Google Code</a> if you want to try running the tests yourself.

<p></p>

If nothing else, this should serve as an
<a href="http://code.google.com/p/closure-experiments/source/browse/trunk/build.xml">example of how to use the
Compiler and calcdeps.py from an Ant build file</a>, as well as an example of
<a href="http://code.google.com/p/closure-experiments/source/browse/trunk/src/com/bolinfest/closure/DebugStrippingCompilerRunner.java">how to extend CompilerRunner to enable additional optimizations</a>.

<script src="http://www.google-analytics.com/ga.js"></script>
<script>
try {
  _gat._getTracker("UA-1213368-1")._trackPageview();
} catch(e) {} 
</script>

</body>
</html>